import React, { Component } from 'react';
import '../../view/Index/Allgoods.scss';
import Search from '../../components/Allsearch.jsx';
import Order from '../../components/Allgoods/order.jsx'
import { thrid_subcate, searchkey } from '../../utils/api.js'
import { Button, Space, Toast } from 'antd-mobile'

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            goods: []
        }
    }
    componentDidMount() {
        if (!this.props.location.state) {
            searchkey({ searchkey: "" }).then((res) => {
                this.setState({
                    goods: res.data.list
                })
            })
        }
        else if (this.props.location.state.searchKey) {
            searchkey({ searchkey: this.props.location.state.searchKey }).then((res) => {
                if (res.data.list.length == 0) {
                    Toast.show({
                        content: '没有与之匹配的商品',
                        afterClose: () => {
                            this.props.history.go(-1)
                        },
                    })
                }
                this.setState({
                    goods: res.data.list
                })
                if (!localStorage.getItem("searchKey")) {
                    localStorage.setItem("searchKey", this.props.location.state.searchKey)
                } else {
                    var a = localStorage.getItem("searchKey");
                    localStorage.setItem("searchKey", a + " " + this.props.location.state.searchKey)

                }
            })
        }
        else if (this.props.location.state.id) {
            thrid_subcate({ id: this.props.location.state.id }).then((res) => {
                if (res.data.status == "ok") {
                    this.setState({
                        goods: res.data.list
                    })
                } else {
                    Toast.show({
                        content: '该商品已下架',
                        afterClose: () => {
                            this.props.history.go(-1)
                        },
                    })

                }
                console.log("三级搜索", res.data)
            })
        }
    }
    handleClick(item) {
        this.props.history.push({
            pathname: '/details',
            state: {
                id: item.id
            }
        })
        console.log(item)
    }
    render() {
        return (
            <div className='allgoods'>
                <div className="top">
                    <p>全部商品</p>
                    <Search {...this.props} />
                    <Order />
                </div>


                <div className="goods">
                    {
                        this.state.goods && this.state.goods.map((item, index) => {
                            return (
                                <div className="item" key={index}
                                    onClick={() => { this.handleClick(item) }}
                                >
                                    <img src={item.pic} alt="" />
                                    <p>{item.name}</p>
                                    <p><span>原价￥9999</span></p>
                                    <p><span className="lastline">抢购价￥<span className="price">{parseInt(item.salesPrice.value)}</span></span></p>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default Home;